@use 'sass:map';
@use './util.scss' as *;

$transition-base: 0.2s !default;
$icon-clear-path: 'M512 43C768 43 981 256 981 512S768 981 512 981 43 768 43 512 256 43 512 43ZM683 277 512 448 341 277 277 341 448 512 277 683 341 747 512 576 683 747 747 683 576 512 747 341Z' !default;
$icon-validate-path: 'M512 43C768 43 981 256 981 512S768 981 512 981 43 768 43 512 256 43 512 43ZM448 619 299 470 235 534 448 747 811 384 747 320Z' !default;
$icon-expand-path: 'M362 811 662 512 362 213' !default;
$icon-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
$radius-large: 8px !default;

$ele: () !default;
$ele: map.deep-merge(
  (
    'card': (
      'bg': elVar('bg-color'),
      'shadow': elVar('box-shadow', 'lighter')
    ),
    'popper': (
      'bg': elVar('bg-color', 'overlay'),
      'border': none,
      'radius': $radius-large,
      'shadow': elVar('box-shadow', 'light'),
      'arrow-bg': eleVar('popper', 'bg'),
      'arrow-size': 8px,
      'arrow-offset': -4px,
      'arrow-shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06)
    ),
    'tooltip': (
      'color': #fff,
      'font-size': elVar('font-size', 'small'),
      'line-height': 22px,
      'padding': 6px 12px,
      'bg': #000,
      'border': none,
      'radius': elVar('border-radius', 'base'),
      'shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06),
      'arrow-bg': eleVar('tooltip', 'bg'),
      'arrow-shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06)
    ),
    'tooltip-light': (
      'color': elVar('text-color', 'primary'),
      'bg': elVar('bg-color', 'overlay'),
      'border': none,
      'shadow': eleVar('popper', 'shadow'),
      'arrow-bg': eleVar('tooltip-light', 'bg'),
      'arrow-shadow': eleVar('popper', 'arrow-shadow')
    ),
    'popover': (
      'color': elVar('text-color', 'regular'),
      'font-size': elVar('font-size', 'base'),
      'padding': 12px 16px,
      'title-color': elVar('text-color', 'primary'),
      'title-font-size': elVar('font-size', 'base'),
      'title-font-weight': bold,
      'title-padding': 13px 16px 0 16px,
      'title-border': none
    ),
    'select': (
      'padding': 6px 4px,
      'item-height': 32px,
      'item-margin': 2px,
      'item-padding': 0 12px,
      'item-radius': elVar('border-radius', 'small'),
      'item-active-bg': elVar('color-primary', 'light-9'),
      'item-active-hover-bg': elVar('color-primary', 'light-8'),
      'item-active-font-weight': bold,
      'icon-size': 16px,
      'icon-margin': 0 -4px 0 4px
    ),
    'autocomplete': (
      'padding': 6px 4px,
      'item-height': 32px,
      'item-margin': 2px,
      'item-padding': 0 12px,
      'item-radius': elVar('border-radius', 'small')
    ),
    'cascader': (
      'menu-padding': 6px,
      'item-height': 32px,
      'item-margin': 2px,
      'item-padding': 0 12px,
      'item-radius': elVar('border-radius', 'small'),
      'item-active-bg': elVar('color-primary', 'light-9'),
      'item-active-hover-bg': elVar('color-primary', 'light-8'),
      'item-active-font-weight': bold
    ),
    'message-box': (
      'width': 380px,
      'radius': $radius-large,
      'header-color': elVar('text-color', 'primary'),
      'header-font-size': elVar('font-size', 'medium'),
      'header-font-weight': bold,
      'header-line-height': 24px,
      'header-padding': 18px 20px 8px 20px,
      'header-border': none,
      'icon-size': 22px,
      'icon-font-size': 18px,
      'icon-color': elVar('text-color', 'secondary'),
      'icon-hover-color': elVar('text-color', 'primary'),
      'icon-hover-bg': elVar('fill-color', 'light'),
      'icon-radius': elVar('border-radius', 'small'),
      'body-padding': 12px 20px,
      'status-size': 22px,
      'input-margin': 8px 0 6px 0,
      'footer-padding': 8px 20px 18px 20px,
      'footer-border': none,
      'mobile-space': 16px
    ),
    'notification': (
      'width': 360px,
      'border': none,
      'padding': 20px,
      'radius': $radius-large,
      'shadow': elVar('box-shadow', 'light'),
      'color': elVar('text-color', 'regular'),
      'size': elVar('font-size', 'base'),
      'icon-size': 26px,
      'icon-margin': -2px 12px 0 0,
      'title-color': elVar('text-color', 'primary'),
      'title-size': elVar('font-size', 'medium'),
      'title-font-weight': normal,
      'title-line-height': 22px,
      'title-padding': 0 22px 0 0,
      'body-margin': 8px,
      'close-size': 22px,
      'close-margin': 20px 24px 0 0,
      'close-radius': elVar('border-radius', 'small'),
      'close-font-size': 18px,
      'close-color': elVar('text-color', 'secondary'),
      'close-hover-color': elVar('text-color', 'primary'),
      'close-hover-bg': elVar('fill-color', 'light')
    ),
    'radio': (
      'color': elVar('text-color', 'regular'),
      'font-size': elVar('font-size', 'base'),
      'size': 15px,
      'radius': 50%,
      'space': 16px,
      'bg': elVar('bg-color'),
      'border': 1px solid elVar('border-color'),
      'hover-border': 1px solid elVar('color-primary'),
      'active-color': elVar('text-color', 'regular'),
      'active-bg': elVar('color-primary'),
      'active-border': 1px solid elVar('color-primary'),
      'dot-size': 7px,
      'dot-color': #fff,
      'dot-radius': 50%,
      'disabled-color': elVar('disabled', 'text-color'),
      'disabled-bg': elVar('disabled', 'bg-color'),
      'disabled-border': 1px solid elVar('disabled', 'border-color'),
      'disabled-dot-color': elVar('disabled', 'text-color'),
      'sm-font-size': elVar('font-size', 'extra-small'),
      'sm-size': 13px,
      'sm-radius': 50%,
      'sm-dot-size': 5px,
      'sm-dot-radius': 50%,
      'lg-font-size': elVar('font-size', 'base'),
      'lg-size': 16px,
      'lg-radius': 50%,
      'lg-dot-size': 8px,
      'lg-dot-radius': 50%
    ),
    'checkbox': (
      'color': elVar('text-color', 'regular'),
      'font-size': elVar('font-size', 'base'),
      'size': 16px,
      'radius': elVar('border-radius', 'small'),
      'space': 16px,
      'bg': elVar('bg-color'),
      'border': 1px solid elVar('border-color'),
      'hover-border': 1px solid elVar('color-primary'),
      'active-color': elVar('text-color', 'regular'),
      'icon-width': 5.7142857142857135px,
      'icon-height': 9.142857142857142px,
      'icon-left': 21.5%,
      'disabled-color': elVar('disabled', 'text-color'),
      'disabled-bg': elVar('disabled', 'bg-color'),
      'disabled-border': 1px solid elVar('disabled', 'border-color'),
      'sm-font-size': elVar('font-size', 'extra-small'),
      'sm-size': 14px,
      'sm-radius': elVar('border-radius', 'small'),
      'sm-icon-width': 4.5px,
      'sm-icon-height': 7px,
      'sm-icon-left': 24.5%,
      'lg-font-size': elVar('font-size', 'base'),
      'lg-size': 16px,
      'lg-radius': elVar('border-radius', 'small'),
      'lg-icon-width': 5.7142857142857135px,
      'lg-icon-height': 9.142857142857142px,
      'lg-icon-left': 21.5%
    ),
    'tag': (
      'size': 13px,
      'height': 24px,
      'padding': 0 8px,
      'radius': elVar('border-radius', 'small'),
      'close-size': 14px,
      'close-padding': 0,
      'close-margin': 0 -4px 0 2px,
      'close-radius': 3px,
      'color': elVar('color-primary'),
      'bg': elVar('color-primary', 'light-9'),
      'border-color': elVar('color-primary', 'light-7'),
      'close-color': elVar('color-primary'),
      'close-hover-color': elVar('color-primary'),
      'close-hover-bg': elVar('color-primary', 'light-8'),
      'info-color': elVar('text-color', 'regular'),
      'info-bg': elVar('color-info', 'light-9'),
      'info-border-color': elVar('border-color'),
      'info-close-color': elVar('text-color', 'secondary'),
      'info-close-hover-color': elVar('text-color', 'primary'),
      'info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
      'success-color': elVar('color-success'),
      'success-bg': elVar('color-success', 'light-9'),
      'success-border-color': elVar('color-success', 'light-7'),
      'success-close-color': elVar('color-success'),
      'success-close-hover-color': elVar('color-success'),
      'success-close-hover-bg': elVar('color-success', 'light-8'),
      'warning-color': elVar('color-warning'),
      'warning-bg': elVar('color-warning', 'light-9'),
      'warning-border-color': elVar('color-warning', 'light-7'),
      'warning-close-color': elVar('color-warning'),
      'warning-close-hover-color': elVar('color-warning'),
      'warning-close-hover-bg': elVar('color-warning', 'light-8'),
      'danger-color': elVar('color-error'),
      'danger-bg': elVar('color-error', 'light-9'),
      'danger-border-color': elVar('color-error', 'light-7'),
      'danger-close-color': elVar('color-error'),
      'danger-close-hover-color': elVar('color-error'),
      'danger-close-hover-bg': elVar('color-error', 'light-8'),
      'round-radius': 12px,
      'round-padding': 0 10px,
      'sm-size': 12px,
      'sm-height': 20px,
      'sm-padding': 0 4px,
      'sm-radius': elVar('border-radius', 'small'),
      'sm-close-size': 13px,
      'sm-close-padding': 0,
      'sm-close-margin': 0 -2px 0 2px,
      'sm-close-radius': 2px,
      'sm-round-radius': 10px,
      'sm-round-padding': 0 6px,
      'lg-size': 14px,
      'lg-height': 32px,
      'lg-padding': 0 12px,
      'lg-radius': elVar('border-radius', 'base'),
      'lg-close-size': 15px,
      'lg-close-padding': 2px,
      'lg-close-margin': 0 -8px 0 4px,
      'lg-close-radius': 4px,
      'lg-round-radius': 16px,
      'lg-round-padding': 0 14px,
      'dark-color': #fff,
      'dark-bg': elVar('color-primary'),
      'dark-close-color': #fff,
      'dark-close-hover-color': #fff,
      'dark-close-hover-bg': rgba(255, 255, 255, 0.2),
      'dark-info-color': elVar('text-color', 'primary'),
      'dark-info-bg': elVar('color-info', 'light-7'),
      'dark-info-close-color': elVar('text-color', 'secondary'),
      'dark-info-close-hover-color': elVar('text-color', 'primary'),
      'dark-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
      'dark-success-color': #fff,
      'dark-success-bg': elVar('color-success'),
      'dark-success-close-color': #fff,
      'dark-success-close-hover-color': #fff,
      'dark-success-close-hover-bg': rgba(255, 255, 255, 0.2),
      'dark-warning-color': #fff,
      'dark-warning-bg': elVar('color-warning'),
      'dark-warning-close-color': #fff,
      'dark-warning-close-hover-color': #fff,
      'dark-warning-close-hover-bg': rgba(255, 255, 255, 0.2),
      'dark-danger-color': #fff,
      'dark-danger-bg': elVar('color-error'),
      'dark-danger-close-color': #fff,
      'dark-danger-close-hover-color': #fff,
      'dark-danger-close-hover-bg': rgba(255, 255, 255, 0.2),
      'plain-color': elVar('color-primary'),
      'plain-border-color': elVar('color-primary'),
      'plain-close-color': elVar('color-primary'),
      'plain-close-hover-color': elVar('color-primary'),
      'plain-close-hover-bg': elVar('color-primary', 'light-8'),
      'plain-info-color': elVar('text-color', 'regular'),
      'plain-info-border-color': elVar('color-info', 'light-3'),
      'plain-info-close-color': elVar('text-color', 'secondary'),
      'plain-info-close-hover-color': elVar('text-color', 'primary'),
      'plain-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
      'plain-success-color': elVar('color-success'),
      'plain-success-border-color': elVar('color-success'),
      'plain-success-close-color': elVar('color-success'),
      'plain-success-close-hover-color': elVar('color-success'),
      'plain-success-close-hover-bg': elVar('color-success', 'light-8'),
      'plain-warning-color': elVar('color-warning'),
      'plain-warning-border-color': elVar('color-warning'),
      'plain-warning-close-color': elVar('color-warning'),
      'plain-warning-close-hover-color': elVar('color-warning'),
      'plain-warning-close-hover-bg': elVar('color-warning', 'light-8'),
      'plain-danger-color': elVar('color-error'),
      'plain-danger-border-color': elVar('color-error'),
      'plain-danger-close-color': elVar('color-error'),
      'plain-danger-close-hover-color': elVar('color-error'),
      'plain-danger-close-hover-bg': elVar('color-error', 'light-8'),
      'hit-border-color': elVar('color-primary'),
      'hit-info-border-color': elVar('color-info', 'light-3'),
      'hit-success-border-color': elVar('color-success'),
      'hit-warning-border-color': elVar('color-warning'),
      'hit-danger-border-color': elVar('color-error')
    ),
    'tree': (
      'item-height': 30px,
      'item-line-height': 16px,
      'item-margin': 2px,
      'item-padding': 0 12px,
      'item-radius': elVar('border-radius', 'small'),
      'item-active-color': elVar('color-primary'),
      'item-active-weight': bold,
      'item-active-bg': elVar('color-primary', 'light-9'),
      'item-active-hover-bg': elVar('color-primary', 'light-8'),
      'expand-size': 12px,
      'expand-padding': 3px,
      'expand-margin': 0 2px 0 4px,
      'expand-radius': elVar('border-radius', 'small'),
      'expand-hover-bg': hsla(0, 0%, 60%, 0.15)
    ),
    'tree-select': (
      'padding': 6px 4px,
      'item-disabled-color': elVar('disabled', 'text-color')
    ),
    'table': (
      'radius': elVar('border-radius', 'base'),
      'color': elVar('text-color', 'regular'),
      'border-color': elVar('border-color', 'light'),
      'font-size': elVar('font-size', 'base'),
      'line-height': 24px,
      'padding': 9px 12px,
      'th-color': elVar('text-color', 'primary'),
      'th-font-weight': bold,
      'th-bg': elVar('fill-color', 'lighter'),
      'tr-bg': elVar('bg-color'),
      'tr-hover-bg': elVar('fill-color', 'light'),
      'tr-active-bg': elVar('color-primary', 'light-9'),
      'tr-active-hover-bg': elVar('color-primary', 'light-8'),
      'even-bg': elVar('fill-color', 'lighter'),
      'lg-size': elVar('font-size', 'base'),
      'lg-padding': 13px 16px,
      'lg-radius': $radius-large,
      'sm-size': elVar('font-size', 'extra-small'),
      'sm-padding': 4px 8px,
      'sm-radius': elVar('border-radius', 'small'),
      'icon-color': elVar('text-color', 'disabled'),
      'icon-hover-color': elVar('text-color', 'secondary'),
      'icon-hover-bg': rgba(0, 0, 0, 0.08),
      'icon-radius': elVar('border-radius', 'small'),
      'icon-margin': 6px,
      'sort-size': 5px,
      'sort-space': 4px,
      'sort-hover-bg': elVar('fill-color'),
      'filter-size': 14px,
      'filter-padding': 4px 2px,
      'filter-margin': 0 -6px 0 4px,
      'expand-margin': 0 4px 0 -2px,
      'fixed-left-shadow': inset 10px 0 10px -10px rgba(0, 0, 0, 0.15),
      'fixed-right-shadow': inset -10px 0 10px -10px rgba(0, 0, 0, 0.15),
      'sticky-top': 0,
      'fixed-header-sticky-top': 94px,
      'maximized-sticky-top': 40px,
      'fix-height': 0.45px
    ),
    'descriptions': (
      'radius': $radius-large,
      'border-color': elVar('border-color', 'light'),
      'bg': elVar('fill-color', 'lighter')
    ),
    'datepicker': (
      'header-height': 42px,
      'header-padding': 0 12px,
      'header-border': 1px solid elVar('border-color', 'light'),
      'label-size': 15px,
      'label-weight': bold,
      'label-color': elVar('text-color', 'regular'),
      'label-hover-color': elVar('color', 'primary'),
      'label-space': 8px,
      'icon-size': 15px,
      'icon-color': elVar('text-color', 'secondary'),
      'icon-hover-color': elVar('text-color', 'primary'),
      'icon-disabled-color': elVar('disabled', 'text-color'),
      'icon-space': 8px,
      'body-width': 288px,
      'body-padding': 8px 12px,
      'color': elVar('text-color', 'regular'),
      'font-size': elVar('font-size', 'base'),
      'off-color': elVar('text-color', 'placeholder'),
      'hover-color': elVar('text-color', 'primary'),
      'hover-bg': elVar('fill-color', 'light'),
      'cell-radius': elVar('border-radius', 'small'),
      'today-color': inherit,
      'today-border': 1px solid elVar('color-primary'),
      'today-weight': normal,
      'active-color': #fff,
      'active-bg': elVar('color-primary'),
      'disabled-color': elVar('disabled', 'text-color'),
      'disabled-bg': elVar('disabled', 'bg-color'),
      'year-width': 58px,
      'year-height': 26px,
      'year-radius': elVar('border-radius', 'base'),
      'year-padding': 22px 0,
      'year-space': 4px 0,
      'month-padding': 22px 0,
      'month-space': 4px 0,
      'end-margin': 3.5px,
      'footer-padding': 8px 12px,
      'footer-border': 1px solid elVar('border-color', 'light'),
      'inrange-bg': elVar('color-primary', 'light-9'),
      'inrange-hover-bg': elVar('color-primary', 'light-8'),
      'inner-border': elVar('border-color', 'light'),
      'sidebar-width': 120px,
      'sidebar-padding': 8px 6px,
      'sidebar-border': 1px solid elVar('border-color', 'light'),
      'shortcut-height': 28px,
      'shortcut-size': elVar('font-size', 'base'),
      'shortcut-color': elVar('text-color', 'regular'),
      'shortcut-padding': 0 8px,
      'shortcut-margin': 4px,
      'shortcut-radius': elVar('border-radius', 'small'),
      'shortcut-hover-color': elVar('text-color', 'primary'),
      'shortcut-hover-bg': elVar('fill-color', 'light'),
      'range-icon-color': elVar('text-color', 'placeholder'),
      'range-icon-size': elVar('font-size', 'base')
    ),
    'timepicker': (
      'width': 180px,
      'height': 220px,
      'padding': 8px 4px,
      'item-size': elVar('font-size', 'base'),
      'item-color': elVar('text-color', 'regular'),
      'item-height': 28px,
      'item-radius': elVar('border-radius', 'small'),
      'item-hover-bg': elVar('fill-color', 'light'),
      'item-hover-color': elVar('text-color', 'primary'),
      'item-active-bg': elVar('color-primary', 'light-9'),
      'item-active-color': elVar('color-primary'),
      'item-disabled-color': elVar('disabled', 'text-color'),
      'item-disabled-bg': transparent,
      'line': 1px solid elVar('border-color', 'light'),
      'line-padding': 3px,
      'line-margin': 4px,
      'arrow-color': elVar('text-color', 'secondary'),
      'arrow-size': elVar('font-size', 'base'),
      'footer-padding': 6px 10px,
      'button-height': 24px,
      'button-padding': 0 10px,
      'button-radius': elVar('border-radius', 'small'),
      'button-size': 12px,
      'button-space': 8px,
      'header-height': 42px,
      'header-border': 1px solid elVar('border-color', 'light'),
      'header-size': 14px,
      'range-space': 6px
    ),
    'input': (
      'padding-left': 10px,
      'padding-right': 10px,
      'bg': transparent,
      'border': 1px solid elVar('border-color'),
      'radius': elVar('border-radius', 'base'),
      'hover-bg': transparent,
      'hover-border': 1px solid elVar('color-primary'),
      'hover-shadow': none,
      'focus-bg': transparent,
      'focus-border': 1px solid elVar('color-primary'),
      'focus-shadow': 0 0 0 2px elVar('color-primary', 'light-8'),
      'disabled-color': elVar('disabled', 'text-color'),
      'disabled-bg': elVar('disabled', 'bg-color'),
      'disabled-border': 1px solid elVar('disabled', 'border-color'),
      'icon-size': 14px,
      'icon-space': 6px,
      'icon-color': elVar('text-color', 'placeholder'),
      'icon-hover-color': elVar('text-color', 'secondary'),
      'eye-margin': 0 -2px 0 6px,
      'clear-margin': 0 -2px 0 6px,
      'clear-color': elVar('text-color', 'disabled'),
      'clear-hover-color': elVar('text-color', 'secondary'),
      'status-margin': 0 -2px 0 6px,
      'status-color': elVar('color-success'),
      'count-size': elVar('font-size', 'small'),
      'count-color': elVar('text-color', 'secondary'),
      'extra-color': elVar('text-color', 'regular'),
      'extra-bg': elVar('fill-color', 'light'),
      'extra-padding': 0 10px,
      'extra-line-height': normal,
      'extra-preset-margin': -1px -11px
    ),
    'input-error': (
      'bg': transparent,
      'border': 1px solid elVar('color-error'),
      'hover-bg': transparent,
      'hover-border': 1px solid elVar('color-error'),
      'hover-shadow': none,
      'focus-bg': transparent,
      'focus-border': 1px solid elVar('color-error'),
      'focus-shadow': 0 0 0 2px elVar('color-error', 'light-8'),
      'disabled-bg': elVar('disabled', 'bg-color'),
      'disabled-border': 1px solid elVar('disabled', 'border-color'),
      'status-color': elVar('color-error')
    ),
    'input-sm': (
      'padding-left': 8px,
      'padding-right': 8px
    ),
    'input-lg': (
      'padding-left': 12px,
      'padding-right': 12px
    ),
    'textarea': (
      'padding-top': 4px,
      'padding-bottom': 4px,
      'count-bg': elVar('bg-color'),
      'count-padding': 0,
      'count-right': 12px,
      'count-bottom': 6px
    ),
    'textarea-sm': (
      'padding-top': 2px,
      'padding-bottom': 2px
    ),
    'textarea-lg': (
      'padding-top': 8px,
      'padding-bottom': 8px
    )
  ),
  $ele
);
